<template>
    <div class="oldversion">
        <Header :title="isEdit ? '编辑技能证书' : '添加技能证书'"></Header>
        <div class="topheader page">
            <div class="itembox disFlex" v-for="(item, index) in itemList" :key="index" @click="topage(item)">
                <div class="leftItem">
                    <label for="" class="fontBlack2 font36 textL">{{ item.title }}</label>
                    <label for="" class=" font40 fontGrayB9 textL" v-if="!item.data">{{ item.placeholder }}</label>
                    <label for="" class="fontBlack2 font40 textL" v-else>{{ item.data }}</label>
                </div>
                <img :src="require('@/assets/images/chevron-right.png')" class="old_rightIcon1">

            </div>
            <div class="blockbox"></div>
            <div class="bottom_submitBtn" v-if="!isEdit">
                <div @click="submit" class="font44 bgBlueFC fontWhite">保存</div>
            </div>
            <div class="old_bottom_submitBtn_two disFlex" v-else>
                <div @click="del" class="font44 bgGrayec fontBlack73">删除</div>
                <div @click="submit" class="font44 bgBlueFC fontWhite">保存</div>
            </div>
        </div>

        <picker-popup :columns="column" :show="show" @change="isConfirm" :type="type"
            :customFieldName="customFieldName"></picker-popup>
        <dialog-btn :title="'是否确认删除'" :show="delshow" :isold="true"></dialog-btn>
        <van-popup v-model:show="timeshow" position="bottom" :style="{ 'border-radius': '0.16rem 0.16rem 0 0', }"
            :close-on-click-overlay="false">
            <van-datetime-picker v-model="currentDate" type="year-month" :formatter="formatter" @confirm="onConfirmTime"
                @cancel="onCancelTime" :min-date="minDate" :max-date="maxDate" />
        </van-popup>
        <dialog-btn :title="'是否保存当前页面'" :show="exitshow" :isold="true"></dialog-btn>
    </div>
</template>

<script>
import Header from '@/components/oldheader.vue';
import PickerPopup from '@/components/pickerpopup.vue';
import DialogBtn from '@/components/dialogbtn.vue';

import { getCurrentInstance, reactive } from 'vue'
import { Toast } from 'vant';
export default {
    components: {
        Header,
        PickerPopup,
        DialogBtn
    },
    data() {
        return {
            itemList: [
                { title: '证书', data: '', placeholder: '请输入', page: 'certificateName' },
                { title: '等级', data: '', placeholder: '请选择', page: 'skillLevel' },
                { title: '时间', data: '', placeholder: '请选择', page: 'getTime' },
            ],
            isEdit: false,
            show: false,
            type: '',
            column: [],
            delshow: false,
            currentDate: new Date(),
            maxDate: new Date(),
            minDate: new Date(1940, 0, 1),
            timeshow: false,
            customFieldName: { text: 'dictLabel' },
            token: this.$store.state.token,
            data: {}, //需要回调的参数id和vesion
            storeData: {},
            obj: {},//用于存储
            paramid: this.$route.params.id,//编辑参数
            skillInfolist: [],
            exitshow: false,
            idcard: this.$store.state.idCard
        }
    },
    mounted() {
        this.getinitInfo();
    },
    methods: {
        // 是否存在信息
        getinitInfo() {
            this.api = getCurrentInstance().appContext.config.globalProperties.$http;
            var that = this;
            var data = {
                identityNumber: that.idcard
            }
            var paramid = this.$store.state.id; //是否为编辑
            var storeData = this.$store.state.skillInfoList;
            this.api.get('/personnel/h5/resumeInfo/queryOne', data).then(res => {
                var data = res.data;
                var data1 = data.resumeSkillRst;
                if (storeData.certificateName || storeData.skillLevel || storeData.getTime) {
                    that.storeData = storeData;
                    if (paramid) {
                        that.isEdit = true;
                    }
                } else {
                    if (data.resumeSkillRst) {
                        if (data1.id) {
                            var myget = {
                                id: data1.id,
                                version: data1.version,
                                identityNumber: data1.identityNumber
                            };
                            that.$store.commit('setmyget', myget);
                        }
                        if (that.paramid) {
                            for (let i = 0; i < data1.skillInfoList.length; i++) {
                                if (data1.skillInfoList[i].id == that.paramid) {
                                    that.$store.commit('setskillInfoList', data1.skillInfoList[i]);
                                    that.$store.commit('setid', that.paramid);
                                    that.isEdit = true;
                                    that.storeData = data1.skillInfoList[i]
                                }
                            }

                        }
                        if (data1.skillInfoList.length > 0) {
                            that.$store.commit('setworkList', data1.skillInfoList);
                        }
                    }
                };
                that.getData(that.storeData);//处理数据问题

            })
        },
        // 处理数据问题
        getData(data) {
            for (let i = 0; i < this.itemList.length > 0; i++) {
                if (this.itemList[i].title == '证书') {
                    this.itemList[i].data = data.certificateName;
                } else if (this.itemList[i].title == '等级') {
                    // 等级下拉列表
                    this.getlvelList(i, data.skillLevel);
                } else if (this.itemList[i].title == '时间') {
                    if (data.getTime) {
                        this.itemList[i].data = data.getTime.length == 10 ? data.getTime.slice(0, 7) : data.getTime;
                    }
                }
            }
        },
        topage(e) {
            if (e.placeholder == '请输入') {
                this.$router.push({ name: 'oldskilledit', params: {} });
            } else if (e.placeholder == '请选择') {
                this.type = e.page
                if (e.page == 'getTime') {
                    this.timeshow = true;
                } else {
                    this.show = true;
                }

            }

        },
        isClose() {
            this.show = false;
        },
        ispopClose() {
            this.delshow = false;
            if (this.exitshow) {
                this.exitshow = false;
                this.$store.commit('setskillInfoList', {});
                this.$store.commit('setid', '');
                this.$store.commit('setmyget', {});
                this.$store.commit('setworkList', []);
                this.$router.replace('/oldresume')
            }
        },
        isConfirm(value, index, type) {
            for (let i of this.itemList) {
                if (i.page == type) {
                    i.data = value.dictLabel;
                    i.val = value.dictValue;
                    this.storeData[type] = i.val;
                }
            }
            this.$store.commit('setskillInfoList', this.storeData);
            this.show = false;
        },
        submit() {
            for (let i of this.itemList) {
                if (!i.data) {
                    Toast(i.placeholder + i.title);
                    return;
                }
            }
            var that = this;

            var data = this.$store.state.myget;
            data.identityNumber = this.token;
            var list = this.$store.state.workList;
            if (this.$store.state.id) {
                for (let i = 0; i < list.length; i++) {
                    if (this.$store.state.id == list[i].id) {
                        list[i] = this.storeData;
                        list[i].resumeId = data.id;
                        list[i].getTime = list[i].getTime.length == 10 ? list[i].getTime : list[i].getTime + '-01';
                    }
                }
            } else {
                var obj = Object.assign({}, this.storeData);
                obj.resumeId = data.id;
                obj.getTime = obj.getTime + '-01'
                list.push(obj);
            }
            data.skillInfoList = list;

            this.api.post('/personnel/h5/resumeInfo/addOrEditSkill', data).then(res => {
                if (res.code == 200) {
                    that.$store.commit('setskillInfoList', {});
                    that.$store.commit('setid', '');
                    that.$store.commit('setmyget', {});
                    that.$store.commit('setworkList', []);
                    that.$router.replace('/oldresume')
                }

            })
        },
        // 等级下拉列表
        getlvelList(inx, val) {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/skillLevel', {}).then(res => {
                var data = res.data.skillLevel;
                var arr = [];
                for (let i in data) {
                    if (inx) {
                        if (i == val) {
                            this.itemList[inx].data = data[i].dictLabel;
                        }
                    }
                    arr.push(data[i]);
                };
                that.column = arr;
            })
        },
        del() {
            this.delshow = true;
        },
        ispopSub() {
            if (this.delshow) {
                this.delshow = false;
                this.itemList[0].data = '';
                this.itemList[1].data = '';
                this.itemList[2].data = '';
                this.api.get('/personnel/h5/resumeInfo/deleteSkill', { id: this.$store.state.id }).then(res => {
                    if (res.code) {
                        this.$store.commit('setskillInfoList', {});
                        this.$store.commit('setid', '');
                        this.$store.commit('setmyget', {});
                        this.$store.commit('setworkList', []);
                        this.$router.replace('/oldresume')
                    }
                })
                return
            }
            if (this.exitshow) {
                this.exitshow = false;
                this.submit();
                return;
            }

        },
        onConfirmTime(e) {
            let time = e.getFullYear() + '-' + ((e.getMonth() + 1) < 10 ? '0' + (e.getMonth() + 1) : (e.getMonth() + 1));
            this.itemList[2].data = time;
            this.storeData[this.itemList[2].page] = time;
            this.$store.commit('setskillInfoList', this.storeData);
            this.timeshow = false;
        },
        onCancelTime() {
            this.timeshow = false;
        },
        async getOptions(value) {
            let that = this;
            that.column = await new Promise((resolve, reject) => {
                this.api.get('/personnel/h5/resumeInfo/' + value).then(res => {
                    resolve(res.data[value]);
                })
            })
            for (let i of this.itemList) {
                // 反显
                if (this.storeData[i.page]) {
                    if (i.page == 'skillLevel') {
                        i.data = this.column.find((e, i) => {
                            if (e.dictValue == this.storeData['skillLevel']) {
                                return e
                            }
                        }).dictLabel;
                        i.val = this.storeData[i.page];
                    } else {
                        i.data = this.storeData[i.page];
                    }
                }
                if (i.page == 'skillLevel') {
                    this.storeData[i.page] = i.val;

                } else {
                    this.storeData[i.page] = i.data;

                }
            }
            this.$store.commit('setskillInfoList', this.storeData);

        },
        goback() {
            if (JSON.stringify(this.storeData) != '{}') {
                this.exitshow = true;
            } else {
                this.$store.commit('setskillInfoList', {});
                this.$store.commit('setid', '');
                this.$store.commit('setmyget', {});
                this.$store.commit('setworkList', []);
                this.$router.replace('/oldresume')
            }
        }
    }
}
</script>

<style scoped>
.itembox {
    border-bottom: 0.02rem solid #E8E9EC;
    height: 1.66rem;
}

.leftItem {
    display: flex;
    flex-direction: column;
}

.leftItem label:nth-child(1) {
    margin-bottom: 0.08rem;
}

.blockbox {
    height: 1.6rem;
}
</style>